<template>
    <div class="big-container">
        <div class="container">
            <!-- 面包屑部分 -->
            <div class="bread">
                <!-- 收缩图标 -->
                <i :class="appearMenuValue" @click="appearMenu"></i>
                <!-- 面包屑 -->
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item 
                        v-for="item in tabList" 
                        :key="item.label"
                        :to="dealWithRepeatClick(item)"
                    >
                    {{ item.label }}
                </el-breadcrumb-item>

                </el-breadcrumb>

            </div>
            <!-- 头像部分 -->
            <div>
                <el-dropdown>
                    <img :src="photoData.photo_url" alt="头像">
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="clickDialogBox">个人详情</el-dropdown-item>
                        <el-dropdown-item divided @click.native="quitUser">注销</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <!-- 个人详情对话框 -->
        <DialogBox/>
    </div>
</template>

<script>
    import DialogBox from '@/views/DialogBox';
    import axios from 'axios';
    import { mapState } from 'vuex';
    export default {
        name:'Header',
        components:{DialogBox},
        data() {
            return {
                // 菜单栏收缩的图标
                appearMenuValue:'el-icon-s-fold',
                // 用户登录后的数据部分
                photoData:{},
            }
        },
        mounted(){
            const user = JSON.parse(sessionStorage.getItem('user'));
            if(user !== null){
                this.photoData = user;
            }
        },
        computed:{
            // 获取Tabs中的面包屑的数组数据
            ...mapState('Tabs',['tabList']),
        },
        methods:{
            // 收缩菜单栏
            appearMenu(){
                // 修改侧边栏的状态
                this.$store.commit('Aside/UPDATE_MENU');
                // 更换图标
                this.appearMenuValue = this.appearMenuValue === 'el-icon-s-fold'? 'el-icon-s-unfold' : 'el-icon-s-fold';
            },
            // 注销
            quitUser(){
                this.$bus.$emit('updateLoading',true);
                // 1. 移除登录的信息
                sessionStorage.removeItem('user');
                // 2. 发送请求退出登录
                axios.get('http://localhost:8088/home/exitlogin').then(
                    response => {
                        if(response.data.result === "success"){
                            // 3. 清除sessionStorge里的user信息
                            sessionStorage.removeItem('user');
                            // 4. 切换路由
                            this.$router.push({path:'/'});
                        }else{
                            // 提示一下用户名或密码错误
                            this.$message.error(response.data.msg);
                            this.$bus.$emit('updateLoading',false);
                        }
                    },
                    error => {
                        if(error.response.status === 701){
                            window.location.replace('http://localhost:8080/');
                        }else{
                            console.log(error.message);
                        }
                    }
                );
            },
            // 面包屑点击切换路由(解决重复点击出错问题)
            dealWithRepeatClick(item){
                if('/home/'+item.path !== this.$route.path){
                    return { path: item.path };
                }
            },
            // 显示对话框
            clickDialogBox(){
                // 触发自定义事件(通过JSON来解决父组件给自组件传值时的浅拷贝问题)
                this.$bus.$emit('clickDialog',JSON.parse(JSON.stringify(this.photoData)))
            }
        }
    }
</script>

<style lang="less" scoped>
.big-container{
    height: 100%;
    width: 100%;

    .container{
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .bread{
            display: flex;
            i {
                cursor: pointer;
            }
            .el-breadcrumb{
                margin-left: 10px;
            }
            // 更改面包屑中的字体颜色
            .el-breadcrumb ::v-deep .el-breadcrumb__inner {
                color: #efece8 !important;
                font-weight:400 !important;
                cursor: pointer;
            }
        }


        img{
            height: 40px;
            width: 40px;
            cursor: pointer;
            border-radius: 50%;
            margin-top: 5px;
        }
    }
}
</style>